<!--
*@Author: QWP
*@Description: 新闻宣传
*@Params: route.params.pType   1: 新闻编辑     2: 新闻发布
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-content
      style=" padding: 0 12px; background-color: #fff;">
      <a-tabs v-model:activeKey="activeKey"
        @change="initCols">
        <a-tab-pane key="1" tab="未发布" style="padding: 0;">
          <a-layout class="f-h-100 s-bg-white">
            <u-search-header style="padding-left: 0; padding-right: 0">
              <u-form
                :model="searchF"
                :gutter="16"
                :elements="searchEl"
                class="f-w-auto">
                <a-col>
                  <u-icon-button>查询</u-icon-button>
                </a-col>
                <a-col flex="1">
                  <a-row justify="end">
                    <a-space>
                      <template  v-if="route.params.pType == '1'">
                        <u-icon-button itype="add" v-if="route.params.pType == '1'" @click="showEdit = true">新增</u-icon-button>
                        <u-icon-button itype="edit" @click="showEdit = true">修改</u-icon-button>
                        <u-icon-button itype="delete" @click="">删除 </u-icon-button>
                      </template>
                      <template v-else-if="route.params.pType == '2'">
                        <u-icon-button itype="submit" @click="">发布</u-icon-button>
                      </template>
                    </a-space>
                  </a-row>
                </a-col>
              </u-form>
            </u-search-header>
            <a-layout-content>
              <u-table
                :columns="columns"
                :data="tabData"
                v-model:pagination="pagenation"></u-table>
            </a-layout-content>
          </a-layout>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已发布" style="padding: 0;">
          <a-layout class="f-h-100 s-bg-white">
            <u-search-header style="padding-left: 0; padding-right: 0">
              <u-form
                :model="searchF"
                :gutter="16"
                :elements="searchEl"
                class="f-w-auto">
                <a-col>
                  <u-icon-button>查询</u-icon-button>
                </a-col>
              </u-form>
            </u-search-header>
            <a-layout-content>
              <u-table
                :columns="columns"
                :data="tabData"
                v-model:pagination="pagenation"></u-table>
            </a-layout-content>
          </a-layout>
        </a-tab-pane>
      </a-tabs>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle" />

  <!-- 编辑弹窗 -->
  <Detials v-model:open="showDetial"
    wrap-class-name="full-modal"
    title="新闻详情" />
  
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { Button, ColProps, FormItemProps, Space, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import Edit from './Edit.vue'
import Detials from "./Detials.vue";
import { cloneDeep } from 'lodash'
const route = useRoute();
const router = useRouter();

const activeKey = ref('1');

onMounted(() => {
  initCols(route);
})

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    fwzh: "",
    fwzh1: "",
  },
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  { label: "状态", key: "htzt", element: "select", col: { span: 4 }, formItemProps: formItemProps,},
  { label: "发布主题", key: "option", element: "input", col: { span: 4 }, formItemProps: formItemProps, 
    componentProps: { placeholder: '主题' }
  },
];

// 列表
const tabData = reactive([
  { a: "中鼎精密：业务流程一体化，奠定制造企业数字化战略基石", b: "丁艳玲", b1: '其他', 
    b2: '2024-06-01  11:20', b3: '2024-06-01  11:20', yds: 100, zt: '已发布',
  },
  { a: "海政通：打造一网协同新模式，助力海南自贸港建设", b: "丁艳玲", b1: '其他', 
    b2: '2024-06-01  11:20', b3: '2024-06-01  11:20', yds: 98, zt: '已发布',
  },
]);
let columns: Array<TableColumnProps> = reactive([]);
let originCols: Array<TableColumnProps> = [
  { dataIndex: "a", title: "主题", minWidth: 150,
    customRender: ({ record, text }) => {
      return h('a', { href: "javascript:void(0)", type: 'link', onClick: () => toViewDetial(record) }, text)
    }
  },
  { dataIndex: "b", title: "创建者", width: 120, align: 'center' },
  { dataIndex: "b1", title: "新闻来源", width: 150 },
  { dataIndex: "b2", title: "创建时间", width: 150, align: 'center' },
  { dataIndex: "b3", title: "修改时间", width: 150, align: 'center' },
  { dataIndex: "yds", title: "阅读数", width: 100, align: 'right' },
  { dataIndex: "zt", title: "状态", width: 150, align: 'center',
    customRender: ({ text }) => {
      let colors = {
        "未发布": "#666", "已发布": "#52C41A",
      }
      return h(Space, [
        h("div", { class: 'u-meet-status-dot', style: { '--c': colors[text] } }),
        h("span", { style: { color: colors[text] } }, text)
      ])
    }
  },
]

// 初始化列表表头
const initCols = (to) => {
  let cols = cloneDeep(originCols);
  if(activeKey.value == '1') {
    cols = cols.filter((i: TableColumnProps) => i.dataIndex != 'yds')
  }
  columns = cols;
}

// 编辑
let dialogTitle = ref<string>("新闻编辑")
let showEdit = ref<boolean>(false)

// 详情
let showDetial = ref<boolean>(false)
const toViewDetial = (record) => {
  showDetial.value = true;
}

// 导入
let showImp = ref<boolean>(false)

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
:deep(.u-meet-status-dot) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c);
}
</style>
